<template>
	<view class="h100">
		<jp-virtual-list class="h100" refresher isBackTop @refresher="refresher" :data="listx" ref="search">
			<template v-slot="{ list }">
				<div v-for="item in list" :key="item.index">
					<div class="list_item" :style="'height:' + item.height +'rpx'">
						{{item.index}}随机高度：{{item.height}}
					</div>
				</div>
			</template>
		</jp-virtual-list>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				listx: [],
				key: ''
			}
		},
		mounted() {
			const data = []
			for (let i = 0; i < 100000; i++) {
				data.push({
					name: `Item ${i}`,
					index: i,
					height: (Math.floor(Math.random() * 100)+100)
				})
			}
			this.listx = data
		},
		methods: {
			refresher(){
				setTimeout(()=>{
					this.$refs.search.refreshers()
				},3000)
			},
			onSearch() {
				this.$refs.search.search('name', this.key, true)
			},
			clicks(item) {
				this.$refs.search.deleteData('index', item.index)
			},
			search(item) {
				this.$refs.search.search('name', item.index)
			}
		}
	}
</script>

<style lang="scss">
	.h100{
		height: calc(100vh - 45px);
	}
	.list_item {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #f5f5f5;
	}
</style>